<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <!-- <go-back aa="/volunteer/balance" :bb="backTypeId"></go-back> -->
          <headerBack></headerBack>
          <div class="scrollerDiv">
            <h2>所含专业列表</h2>
            <ul class="majorList">
              <li class="majorItem" v-for="(item, index) of majorList" :key="index" @click="jumpToNext(item.major_code)">
                <div class="left">
                  <div class="top">
                    <b>{{ item.major_name }}</b>
                    <span>{{ item.major_code }}</span>
                  </div>
                  <div class="bottom">
                    {{ item.type_name + ' / ' + item.catalog_name }}
                  </div>
                </div>
                <div class="right">
  
                  <i></i>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import headerBack from '~/components/headerBack'
import { getmajor} from '~/api/repository'
import ls from 'store2';
export default {
  components: {
    headerBack,
  },
  data() {
    return {
      codeList: null,
      majorList: [],
      backTypeId: null, 
    }
  },
  mounted() {
     this.$visit(this.$route.path)
		let majorData= JSON.parse(sessionStorage.getItem("majorParam"))
    this.codeList = majorData.list;
    this.backTypeId = majorData.typeId;
    this.getMajorList(this.codeList)
  },

  methods: {
    getMajorList(list) {
      list.sort(function(a, b) { return a-b});
      list = list.filter((x, index, self) => {
        return self.indexOf(x) === index;
      })

      for (const item of list) {
        this.majorList.push(this.getDetail(item));
      }
    },
    getDetail(typeId) {
      const detail_item = {
        type_name: '',
        catalog_name: '',
        major_name: '',
        major_code: '',
      };
      getmajor({ major_code: typeId }).then(res => {
        if (res.code == 200) {
          const data = res.data;
          detail_item.type_name = data.type_name;
          detail_item.catalog_name = data.catalog_name;
          detail_item.major_name = data.major_name;
          detail_item.major_code = data.major_code;
        }
      })
      return detail_item;
    },
    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    jumpToNext(code) { 
      const sendObj = {
        code: code,
        typeId: this.backTypeId,
      }
		
      ls.set('preUrl','../professional/list')
      this.goto('/professional/detail', JSON.stringify(sendObj));
    } 
  },
}
</script>

<style lang="less" scoped>
  .outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.scrollerDiv {
			padding: 0 0.3rem;
      width: 100%;
      h2 {
        color: #222;
        text-align: center;
        font-size: 0.4rem;
        font-weight: bold;
      }
      .majorList {
        margin-top: 0.32rem;
        list-style: none;
        padding-left: 0;
        .majorItem {
          border-bottom: 1px solid #EEE;
          width: 100%;
          height: 1.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .top {
              margin-bottom: 0.1rem;
              b {
                color: #222;
                font-size: 0.32rem;
                font-weight: bold;
              }
              span {
                color: #999;
                font-size: 0.24rem;
                margin-left: 0.1rem;
              }
            }
            .bottom {
              color: #999;
              font-size: 0.24rem;
              line-height: 0.33rem;
            }
          }
          .right {
            width: 0.4rem;
            height: 0.4rem;
            i {
              width: 100%;
              height: 100%;
               display: inline-block;
          background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
          background-size:3rem 2.4rem;
            }
          }
        }
      }
    }  
  }  
</style>

